<template>
	<div class="ServiceMonitor">
		<div class="ServiceMonitor-warpper" v-resize:throttle="onResize">
			<div class="service-warpper" v-for="item in servers">
				<div class="service-header">服务器IP：{{item}}</div>
				<div class="cpu-echart" ref="cpu-echart"></div>
				<div class="mem-echart" ref="mem-echart"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import resize from 'vue-resize-directive';
	import { errorNotice } from 'common/js/dom';
	import { cloneObj, timeFilter } from 'common/js/util';
	import { cpuEchart, memEchart } from 'common/js/echarts';
	import { getIpList, getData } from 'api/ServiceMonitor';

	const timeFormat = 'yyyy/MM/dd HH:mm:ss';

	export default {
		directives: {
			resize
		},
		mounted() {
			setTimeout(() => {
				this._getIpList();
				this.initOption();
			}, 20)
		},
		data() {
			return {
				servers: [],
				serversData: {},
				cpuEchartsData: {},
				cpuEchartsOption: {},
				memEchartsData: {},
				memEchartsOption: {},
				showLoading: false
			}
		},
		methods: {
			initEchart(res, index, serve) {
				let time = new Date(res.create_time);
				let valueTime = timeFilter(time, timeFormat);
				let data = {
					name: valueTime,
					value: [
						valueTime,
						res.cpuUsage
					]
				}
				if(this.cpuEchartsData[serve] === undefined) {
					this.cpuEchartsData[serve] = echarts.init(this.$refs['cpu-echart'][index]);
					this.cpuEchartsOption[serve] = [];
					let dateTime = time.getTime();
					for(let i = 49; i > 0; i--) {
						this.cpuEchartsOption[serve].push({
							name: timeFilter(new Date(dateTime - (i + 1) * 2000), timeFormat),
							value: [
								timeFilter(new Date(dateTime - (i + 1) * 2000), timeFormat),
								res.cpuUsage
							]
						});
					}
					this.cpuEchartsOption[serve].push(data);
					this.cpuEchartsData[serve].setOption(cpuEchart(this.cpuEchartsOption[serve]));
				} else {
					this.cpuEchartsOption[serve].shift();
					this.cpuEchartsOption[serve].push(data);
					this.cpuEchartsData[serve].setOption({
						series: [{
							data: this.cpuEchartsOption[serve]
						}]
					})
				}

				this.memEchartsOption[serve] = [{
					value: res.memused,
					name: '使用内存',
					itemStyle: {
						normal: {
							color: '#C23531'
						}
					}
				}, {
					value: res.memFree,
					name: '剩余内存',
					itemStyle: {
						normal: {
							color: '#749F83'
						}
					}
				}]
				if(this.memEchartsData[serve] === undefined) {
					this.memEchartsData[serve] = echarts.init(this.$refs['mem-echart'][index]);
					this.memEchartsData[serve].setOption(memEchart(this.memEchartsOption[serve]));
				} else {
					this.memEchartsData[serve].setOption({
						series: {
							data: this.memEchartsOption[serve]
						}
					})
				}
			},
			initOption() {
				this.time = setInterval(() => {
					this._getIpList();
				}, 2000)
			},
			onResize() {
				for(let key in this.cpuEchartsData) {
					this.cpuEchartsData[key].resize();
				}
				for(let key in this.memEchartsData) {
					this.memEchartsData[key].resize();
				}
			},
			_getIpList() {
				getIpList()
					.then(res => {
						res.map((item, index) => {
							this.serversData[item] = {};
							this._getData(item, index);
						})
						this.servers = res;
					})
					.catch(res => {
						errorNotice(res.message);
					})
			},
			_getData(serve, index) {
				getData(serve)
					.then(res => {
						setTimeout(() => {
							this.initEchart(res, index, serve);
						}, 20)
						this.serversData[serve] = res;
					})
					.catch(res => {
						errorNotice(res.message);
					})
			}
		},
		beforeDestroy() {
			clearInterval(this.time);
		}
	}
</script>

<style scoped lang="scss">
	.ServiceMonitor {
		width: 100%;
		height: 100%;
		.ServiceMonitor-warpper {
			width: 100%;
			height: 100%;
			overflow: auto;
			.service-warpper {
				width: calc(100% - 10px);
				height: 40%;
				position: relative;
				border: 1px solid #e3e3e3;
				margin: 0 5px;
				.service-header {
					margin: 0 10px;
					font-size: 14px;
					line-height: 30px;
					border-bottom: 1px solid #e3e3e3;
				}
				.cpu-echart {
					position: absolute;
					top: 30px;
					bottom: 0;
					left: 0;
					right: 50%;
				}
				.mem-echart {
					position: absolute;
					top: 30px;
					bottom: 0;
					left: 50%;
					right: 0;
				}
			}
		}
	}
</style>